/*
 * @Description: 购票页面选择乘车人数与进入订单页的组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:36:04
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-31 18:00:30
 */

<template>
  <div class="population_main fontsize32">
    <div class="population_info flex-h flex-vc">
      <span class="title">乘车人数</span>
      <i
        class="iconfont icon-reduce"
        @click="reducePopulation"
      ></i>
      <span class="population">{{population}}</span>
      <i
        class="iconfont icon-add"
        @click="addPopulation"
      ></i>
      <span class="flex1"></span>
      <button
        class="fontsize32"
        @click="skipToCreateOrder"
      >下一步</button>
    </div>
  </div>
</template>

<script>
import { getRouteLockSeat } from './../../interface/getInterface'
export default {
  props: {
    direction: {// 当前线路方向
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      population: 1, // 乘车人数
      maxNumberOfPeople: Number, // 余票数
      maxPurchaseLimitation: Number// 最大限购数
    }
  },
  methods: {
    addPopulation() { // 添加乘车人数，上限999
      let ticketStr = window.localStorage.getItem('ticket')
      if (ticketStr) {
        let ticketObj = JSON.parse(window.localStorage.getItem('ticket'))
        this.maxNumberOfPeople = ticketObj.CAN_SELL_SEAT_COUNT
        this.maxPurchaseLimitation = ticketObj.MAX_LIMIT_TICKET_COUNT
        if (this.population >= this.maxNumberOfPeople) {
          this.population = this.maxNumberOfPeople
          this.$toastMsg('不能再多啦')
        } else if (this.population >= this.maxPurchaseLimitation) {
          this.population = this.maxPurchaseLimitation
          this.$toastMsg('不能再多啦')
        } else {
          this.population++
        }
      } else {
        this.$toastMsg('请选择乘车班次', 1200)
      }
    },
    reducePopulation() { // 减少乘车人数，下限1
      let ticketStr = window.localStorage.getItem('ticket')
      if (ticketStr) {
        if (this.population === 1) {
          this.$toastMsg('不能再少啦')
        } else {
          this.population--
        }
      } else {
        this.$toastMsg('请选择乘车班次')
      }
    },
    skipToCreateOrder() { // 点击下一步，进入订单确认
      this.$emit('lockSeat')
      if (window.localStorage.getItem('ticket_info') && window.localStorage.getItem('ticket')) {
        let params = JSON.parse(window.localStorage.getItem('ticket_info'))
        params.DEPART_PLAN_ID = JSON.parse(window.localStorage.getItem('ticket')).DEPART_PLAN_ID
        params.TAKE_BUS_PEOPLE_COUNT = this.population
        getRouteLockSeat(params).then(data => {
          window.localStorage.setItem('order', JSON.stringify(data))
          this.$router.push({
            name: 'createOrder',
            query: {
              ticketDateType: data.TICKET_DATE_TYPE,
              direction: this.direction
            }
          })
        }).catch(err => {
          this.$emit('lockSeatFail')
          console.log(err)
          // this.$toastMsg('不能再少啦')
        })
      } else {
        this.$toastMsg('请选择乘车班次')
        // this.showToast('请选择乘车班次')
      }
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.population_main {
  height: 112px;
  .population_info {
    width: 100%;
    height: 112px;
    line-height: 112px;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    box-shadow: 0 0 5px #ccc; /*no*/
    white-space: nowrap;
    i {
      width: 48px;
      height: 48px;
      line-height: 48px;
      display: inline-block;
      text-align: center;
      color: #fff;
      background-color: #027aff;
      border-radius: 50%;
      font-weight: bold;
    }
    .title {
      padding: 0 32px;
      color: #999;
    }
    .population {
      width: 84px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      display: inline-block;
      border: 1px solid #ccc;
      margin: 0 16px;
    }
    button {
      width: 248px;
      height: 112px;
      border: 0;
      color: #fff;
      background-color: #027aff;
    }
  }
}
</style>
